<template>
  <div class="wraper">
    <Layout>
      <u-sticky bgColor="#fff" :offsetTop="17">
        <u-tabs :list="list" :lineWidth="60" class="tabs_box" @change="tabsChange"></u-tabs>
      </u-sticky>
      <div class="content">
        <component :is="getCurrentComponent" :infoData="infoData"></component>
      </div>
    </Layout>
  </div>
</template>

<script>
import InfoCom from "@/pages/petition/petitionDetail/components/InfoCom.vue";
import PrevewCom from "@/pages/petition/petitionDetail/components/ContentCom.vue";
import LogsCom from "@/pages/petition/petitionDetail/components/LogsCom.vue";
import { getPetitionDetail } from '@/api/signManage/petition.js'
export default {
  components: {
    InfoCom,
    PrevewCom,
    LogsCom,
  },
  data() {
    return {
      routeQuery:{},
      currentIndex: 0,
      list: [
        {
          name: "簽呈信息",
        },
        {
          name: "簽呈内容",
        },
        {
          name: "簽呈日志",
        },
      ],
      infoData: {},
    };
  },
  onLoad(query) {
    this.routeQuery = query;
    this.queryDetailData()
  },
  computed:{
    getCurrentComponent(){
      switch(this.currentIndex){
        case 0:
          return InfoCom
        case 1:
          return PrevewCom
        case 2:
          return LogsCom
        default:
          return InfoCom
      }
    }
  },
  methods: { 
    tabsChange(e){
      this.currentIndex = e.index
    },
    async queryDetailData(){
      try {
         uni.showLoading({ mask: true })
        const { data } = await getPetitionDetail(this.routeQuery)
        this.infoData = data
         uni.hideLoading()
      } catch (error) {
        uni.hideLoading()
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.wraper {
  .tabs_box {
    padding-bottom: 2px;
    border-bottom: 2rpx solid #b9b9b9;
    ::v-deep.u-tabs__wrapper__nav{
      display: flex;
      .u-tabs__wrapper__nav__item {
        flex: 1;
      }
    }
  }
}
</style>
